<!DOCTYPE html>

<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
    />
    <meta
      name="description"
      content="基于node+vue.js+MongoDB开发的学生成绩管理系统"
    />
    <meta name="author" content="琴时" />
    <meta name="keyword" content="Node,Vue,Bootstrap,jQuery,CSS,HTML,MongoDB" />
    <title>成绩管理系统</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link href="css/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link
      href="css/simple-line-icons/css/simple-line-icons.css"
      rel="stylesheet"
    />
    <!-- 主体样式-->
    <link href="css/style.css" rel="stylesheet" />
  </head>

  <body class="app header-fixed aside-menu-fixed">
    <header class="app-header navbar">
      <a class="navbar-brand" href="#" style="margin: 0 auto">
        <i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i
        >成绩管理系统
      </a>
    </header>
    <div class="app-body">
      <main class="main">
        <!-- 头部管理-->
        <ol class="breadcrumb">
          <li class="breadcrumb-item">首页</li>
          <li class="breadcrumb-item active"><a href="/">学生成绩表</a></li>
          <!-- Breadcrumb Menu-->
        </ol>
        <div class="container-fluid">
          <!--指定插值不闪烁的控件-->
          <div class="animated fadeIn" id="itemsTemplate">
            <div class="card">
              <!--卡片头部-->
              <div class="card-header">
                <i class="icon-people" aria-hidden="true"></i>学生成绩表
                <div class="card-header-actions">
                  <a
                    class="card-header-action btn-setting"
                    @click="addBox"
                    href="#"
                  >
                    <i class="icon-plus">导入</i>
                  </a>
                </div>
              </div>
              <div class="card-body collapse show">
                <!--表单-->
                <!-- 用来查询 -->
                <div class="row">
                  <div class="form-group col-sm-4">
                    <form class="search-validation">
                      <div class="form-group" style="margin-left: 0rem">
                        <button
                          class="btn btn-primary"
                          type="button"
                          @click="search()"
                        >
                          查询1
                        </button>
                        <div style="display: inline-block">
                          <input
                            name="Sno"
                            type="text"
                            class="form-control"
                            style="margin-left: 10px; width: 250px"
                            onkeypress="return event.keyCode != 13;"
                            v-on:keyup.enter="search()"
                            v-model="input"
                            placeholder="请输入学号查找！"
                            pattern="^[0-9]*$"
                            required
                          />
                        </div>
                      </div>
                    </form>
                  </div>
                  <div class="form-group col-sm-4">
                    <form class="search1-validation">
                      <div class="form-group" style="margin-left: 0rem">
                        <button
                          class="btn btn-primary"
                          type="button"
                          @click="search1"
                        >
                          查询
                        </button>
                        <div style="display: inline-block">
                          <input
                            name="Sname"
                            type="text"
                            class="form-control"
                            style="margin-left: 10px; width: 250px"
                            onkeypress="return event.keyCode != 13;"
                            v-on:keyup.enter="search1()"
                            v-model="inputs"
                            placeholder="请输入关键字!"
                            required
                          />
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <table
                  class="table table-responsive-sm table-bordered table-striped"
                >
                  <thead>
                    <tr>
                      <th>学号</th>
                      <th>姓名</th>
                      <th>机器学习</th>
                      <th>大前端</th>
                      <th>微服务</th>
                      <th>R语言</th>
                      <th>系统安全</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <template v-if="pageItems.length">
                    <tbody>
                      <tr v-for="(value,index) in pageItems">
                        <td contenteditable="false">{{ value.Sno }}</td>
                        <td contenteditable="false">{{ value.Sname }}</td>
                        <td contenteditable="false">
                          {{ value.machine_learning }}
                        </td>
                        <td contenteditable="false">{{ value.nodejs }}</td>
                        <td contenteditable="false">
                          {{ value.microservice }}
                        </td>
                        <td contenteditable="false">{{ value.rstudio }}</td>
                        <td contenteditable="false">
                          {{ value.system_safety }}
                        </td>
                        <td>
                          <button
                            class="btn btn-ghost-primary"
                            type="button"
                            @click="edit(value)"
                          >
                            <i class="icon-note"></i> 编辑
                          </button>
                          <button
                            class="btn btn-ghost-danger"
                            type="button"
                            @click="confirmDel(value.Sno)"
                          >
                            <i class="fa fa-trash-o fa-lg"></i> 删除
                          </button>
                        </td>
                      </tr>
                    </tbody>
                  </template>
                </table>
                <!-- 翻页 -->
                <!-- v-bind:以动态地切换 class  如果页码page的值等于当前页数pageIndex的值+1，则动态切换切换class active-->
                <template v-if="pageItems.length">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="#" v-on:click="PrePage()"
                        >Prev</a
                      >
                    </li>
                    <li
                      class="page-item"
                      v-for="page in pageCount"
                      v-bind:class="page==currentPage ? 'active' : ''"
                    >
                      <a
                        class="page-link"
                        href="#"
                        v-on:click="currentPage = page"
                        >{{ page }}</a
                      >
                    </li>
                    <li class="page-item">
                      <a class="page-link" href="#" v-on:click="NextPage()"
                        >Next</a
                      >
                    </li>
                  </ul>
                </template>
                <template v-if="!pageItems.length">
                  <center>
                    <p><strong>暂无数据</strong></p>
                  </center>
                </template>
              </div>
            </div>
            <!-- 模态框放置位置 -->
            <!-- Modal编辑 -->
            <div
              class="modal fade"
              id="primaryModal"
              tabindex="-1"
              role="dialog"
              aria-labelledby="myModalLabel"
              aria-hidden="true"
              data-backdrop="static"
            >
              <div class="modal-dialog modal-primary" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">修改个人信息</h5>
                    <button
                      class="close"
                      type="button"
                      @click="reset"
                      aria-label="Close"
                    >
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <form class="edit-validation" action="#" method="post">
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >学号:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            id="text-input"
                            type="text"
                            name="Sno"
                            placeholder="学号"
                            disabled
                            v-model="editItems.Sno"
                          />
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >姓名:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            id="text-input"
                            type="text"
                            name="Sname"
                            v-model="editItems.Sname"
                            pattern="^[\u4e00-\u9fa5·A-Za-z][\u4E00-\u9FA5·A-Za-z0-9-_\s]{1,15}$"
                            required
                          />
                          <div class="invalid-feedback">
                            用户名必须2到16位中英文、首位必须是中英文，(字母，数字，下划线，减号)
                          </div>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >机器学习:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            id="text-input"
                            type="text"
                            name="machine_learning"
                            placeholder="机器学习"
                            v-model="editItems.machine_learning"
                            pattern="^[0-9]*$"
                            required
                          />
                          <div class="invalid-feedback">
                            只能输入数字，且不能为空！
                          </div>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >大前端:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            id="text-input"
                            type="text"
                            name="nodejs"
                            placeholder="大前端"
                            v-model="editItems.nodejs"
                            pattern="^[0-9]*$"
                            required
                          />
                          <div class="invalid-feedback">
                            只能输入数字，且不能为空！
                          </div>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >微服务:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            id="text-input"
                            type="text"
                            name="microservice"
                            placeholder="微服务"
                            v-model="editItems.microservice"
                            pattern="^[0-9]*$"
                            required
                          />
                          <div class="invalid-feedback">
                            只能输入数字，且不能为空！
                          </div>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >R语言:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            id="text-input"
                            type="text"
                            name="rstudio"
                            placeholder="R语言"
                            v-model="editItems.rstudio"
                            pattern="^[0-9]*$"
                            required
                          />
                          <div class="invalid-feedback">
                            只能输入数字，且不能为空！
                          </div>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >系统安全:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            id="text-input"
                            type="text"
                            name="system_safety"
                            placeholder="系统安全"
                            v-model="editItems.system_safety"
                            pattern="^[0-9]*$"
                            required
                          />
                          <div class="invalid-feedback">
                            只能输入数字，且不能为空！
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button
                      class="btn btn-primary"
                      type="button"
                      @click="editSubmit"
                    >
                      保存
                    </button>
                    <button
                      class="btn btn-secondary"
                      type="button"
                      @click="reset"
                    >
                      取消
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Modal导入成绩 data-backdrop="static"禁止点击外面触发关闭-->
            <div
              class="modal fade show"
              id="addModal"
              tabindex="-1"
              role="dialog"
              aria-labelledby="myModalLabel"
              aria-hidden="true"
              data-backdrop="static"
            >
              <div
                class="modal-dialog modal-dialog-centered modal-primary"
                role="document"
              >
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">导入学生成绩</h5>
                    <button
                      class="close"
                      type="button"
                      v-on:click="reset"
                      aria-label="Close"
                    >
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <form class="add-validation" action="" method="post">
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >学号:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            type="text"
                            name="Sno"
                            v-model="newItems.Sno"
                          />
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >姓名:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            type="text"
                            name="Sname"
                            v-model="newItems.Sname"
                            pattern="^[\u4e00-\u9fa5·A-Za-z][\u4E00-\u9FA5·A-Za-z0-9-_\s]{1,15}$"
                            required
                          />
                          <div class="invalid-feedback">
                            用户名必须2到16位中英文、首位必须是中英文，(字母，数字，下划线，减号)
                          </div>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >机器学习:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            type="text"
                            name="machine_learning"
                            v-model="newItems.machine_learning"
                            pattern="^[0-9]*$"
                            required
                          />
                          <div class="invalid-feedback">
                            只能输入数字，且不能为空！
                          </div>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >大前端:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            type="text"
                            name="nodejs"
                            v-model="newItems.nodejs"
                            pattern="^[0-9]*$"
                            required
                          />
                          <div class="invalid-feedback">
                            只能输入数字，且不能为空！
                          </div>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >微服务:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            type="text"
                            name="microservice"
                            v-model="newItems.microservice"
                            pattern="^[0-9]*$"
                            required
                          />
                          <div class="invalid-feedback">
                            只能输入数字，且不能为空！
                          </div>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >R语言:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            type="text"
                            name="rstudio"
                            v-model="newItems.rstudio"
                            pattern="^[0-9]*$"
                            required
                          />
                          <div class="invalid-feedback">
                            只能输入数字，且不能为空！
                          </div>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="text-input"
                          >系统安全:</label
                        >
                        <div class="col-md-9">
                          <input
                            class="form-control"
                            type="text"
                            name="system_safety"
                            v-model="newItems.system_safety"
                            pattern="^[0-9]*$"
                            required
                          />
                          <div class="invalid-feedback">
                            只能输入数字，且不能为空！
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-primary" type="button" @click="add">
                      保存
                    </button>
                    <button
                      class="btn btn-secondary"
                      type="button"
                      v-on:click="reset"
                    >
                      取消
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Modal删除 -->
            <div
              class="modal fade"
              id="dangerModal"
              tabindex="-1"
              role="dialog"
              aria-labelledby="myModalLabel"
              aria-hidden="true"
              data-backdrop="static"
            >
              <div class="modal-dialog modal-danger" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">危险</h5>
                    <button
                      class="close"
                      type="button"
                      @click="reset"
                      aria-label="Close"
                    >
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <p>记录删除后将无法恢复！确定要删除吗？</p>
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-danger" type="button" @click="del()">
                      确认
                    </button>
                    <button
                      class="btn btn-secondary"
                      type="button"
                      data-dismiss="modal"
                    >
                      取消
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 操作成功 -->
            <div
              class="modal fade"
              id="successModal"
              tabindex="-1"
              role="dialog"
              aria-labelledby="myModalLabel"
              aria-hidden="true"
              data-backdrop="static"
            >
              <div class="modal-dialog modal-success" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">操作成功</h5>
                    <button
                      class="close"
                      type="button"
                      @click="reset"
                      aria-label="Close"
                    >
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <p>{{ message }}</p>
                  </div>
                  <div class="modal-footer">
                    <button
                      class="btn btn-success"
                      type="button"
                      @click="reset"
                    >
                      确认
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 操作失败 -->
            <div
              class="modal fade"
              id="failModal"
              tabindex="-1"
              role="dialog"
              aria-labelledby="myModalLabel"
              aria-hidden="true"
              data-backdrop="static"
            >
              <div class="modal-dialog modal-warning" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">操作失败</h5>
                    <button
                      class="close"
                      type="button"
                      @click="reset"
                      aria-label="Close"
                    >
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <p>{{ message }}</p>
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-light" type="button" @click="reset">
                      确认
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <footer class="app-footer">
      <div>
        <a href="https://www.cnblogs.com/zhif97/">琴时</a>
        <span>&copy; 2020 Create project.</span>
      </div>
      <div class="ml-auto">
        <span>author by</span>
        <a href="https://www.cnblogs.com/zhif97/">琴时</a>
      </div>
    </footer>
    <!-- 引入js文件-->
    <script src="/js/jquery/js/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <!-- 获取数据 -->
    <script>
      var app = [] //定义全局变量
      $(function () {
        app = new Vue({
          el: '#itemsTemplate',
          data: {
            input: null, //搜索框内容
            inputs: '', //搜索框内容
            query: null, //精确查询条件
            str: '', //模糊查询条件
            message: '', //提示信息
            Sno: null, //学号
            pageSize: 5, //一页加载数据
            currentPage: 1, //当前页面
            total: 0, //总数据
            items: [],
            //添加临时数组对象
            newItems: [],
            //临时数组对象
            editItems: {
              Sno: null,
              Sname: '',
              machine_learning: null,
              nodejs: null,
              microservice: null,
              rstudio: null,
              system_safety: null,
            },
          },
          // 生命周期钩子函数(获取后端数据)
          created() {
            this.getScore()
          },
          // vue计算属性
          computed: {
            // 数据分页
            pageItems() {
              // Sno从小到大排序
              this.items.sort((a, b) => {
                return a.Sno - b.Sno
              })
              let startIndex = (this.currentPage - 1) * this.pageSize //当前页面起始index
              let endIndex = startIndex + this.pageSize - 1 //当前页面结束index
              // 过滤或排序缓存，而不实际改变或重置原始数据
              let data = this.items.filter(
                (item, index) => index >= startIndex && index <= endIndex
              )
              return data
            },
            // 计算总页数
            pageCount() {
              let Count = Math.ceil(this.total / this.pageSize)
              return Count
            },
          },
          // 监听
          watch: {
            pageCount() {
              this.total = this.items.length
              if (this.currentPage > this.pageCount) {
                this.currentPage = this.pageCount
              }
              if (this.items.length <= this.pageSize) {
                this.currentPage = 1
              }
            },
          },
          // 方法
          methods: {
            /*生成指定长度+1的随机数*/
            randomCode(length) {
              var result = ''
              var list = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
              var len = list.length
              for (let i = 0; i < length; i++) {
                //随机生成一位0~9的数:index作为list的下标
                let index = Math.floor(Math.random() * len)
                result += list[index]
              }
              result = 1 + result //保证第一位不为0
              return parseInt(result)
            },
            // 重置数据
            reset() {
              this.newItems = {}
              this.editItems = {
                Sno: null,
                Sname: '',
                machine_learning: null,
                nodejs: null,
                microservice: null,
                rstudio: null,
                system_safety: null,
              }
              this.Sno = null
              this.input = null
              this.inputs = ''
              $('#addModal').modal('hide') //关闭添加modal
              $('#primaryModal').modal('hide') //关闭修改modal
              $('#dangerModal').modal('hide') //关闭删除modal
              $('#findModal').modal('hide') //关闭查询modal
              $('#successModal').modal('hide')
              $('#failModal').modal('hide')

              this.getScore() //请求数据
            },
            // 查询数据
            async getScore() {
              let { data: res } = await axios.get(
                `/user/query?Sno=${this.query}&&Sname=${this.str}`
              )
              // console.log("相应包:", result);
              if (res.status == 200) {
                this.items = res.data
                this.total = this.items.length
                // console.log("数据接收成功:\n", this.items);
              } else if (res.status === 500) {
                this.message = res.message
                $('#failModal').modal('show')
                this.query = null
                this.str = ''
                this.reset()
              }
            },
            // 添加
            addBox() {
              var form = document.getElementsByClassName('add-validation')[0]
              form.classList.remove('was-validated') //先移除表单验证信息
              $('#addModal').modal('show')
              // 创建容器
              this.newItems = {
                Sno: this.randomCode(6),
                Sname: '',
                machine_learning: null,
                nodejs: null,
                microservice: null,
                rstudio: null,
                system_safety: null,
              }
            },
            //添加保存
            async add() {
              var form = document.getElementsByClassName('add-validation')[0]
              if (form.checkValidity() === true) {
                // 用表单来初始化
                var formData = new FormData(form)
                // var name = formData.get("Sname"); // 获取名字
                // 当然也可以在此基础上，添加其他数据
                let res = await axios.post('/user/create', formData)
                let result = res.data
                console.log(result)
                if (result.status === 200) {
                  this.message = result.message
                  $('#successModal').modal('show')
                } else if (result.status === 500) {
                  this.message = result.message
                  $('#failModal').modal('show')
                }
                this.reset()
              } else {
                form.classList.add('was-validated')
              }
            },
            // 单选删除(打开模态框，并获取index)
            confirmDel(Sno) {
              this.Sno = Sno
              $('#dangerModal').modal('show')
            },
            // 进行删除
            async del() {
              let res = await axios.get(`/user/delete?Sno=${this.Sno}`)
              let result = res.data
              if (result.status === 200) {
                this.message = result.message
                $('#successModal').modal('show')
                this.query = null //重置查询条件
              } else if (result.status === 500) {
                this.message = result.message
                $('#failModal').modal('show')
              }
              this.reset()
            },
            //编辑
            edit(value) {
              var form = document.getElementsByClassName('edit-validation')[0]
              form.classList.remove('was-validated') //先移除表单验证信息
              this.editItems = JSON.parse(JSON.stringify(value))
              $('#primaryModal').modal('show')
            },
            //编辑后保存
            async editSubmit() {
              var form = document.getElementsByClassName('edit-validation')[0]
              if (form.checkValidity() === true) {
                let res = await axios.post(`/user/update`, this.editItems)
                console.log(res.data)
                let result = res.data
                if (result.status === 200) {
                  this.message = result.message
                  $('#successModal').modal('show')
                } else if (result.status === 500) {
                  this.message = result.message
                  $('#failModal').modal('show')
                }
                console.log('000:', this.input)
                this.reset()
              } else {
                form.classList.add('was-validated')
              }
            },
            // 精确查询
            search() {
              var form = document.getElementsByClassName('search-validation')[0]
              if (form.checkValidity() === false) {
                this.message = '只能输入数字，且不能为空!'
                $('#failModal').modal('show')
              } else {
                this.str = this.inputs = ''
                this.query = this.input
                this.getScore()
              }
            },
            // 模糊查询
            search1(val) {
              this.query = this.input = null
              this.str = this.inputs
              console.log('0202:', val)
              this.getScore()
            },
            //上一页
            PrePage: function () {
              if (this.currentPage > 1) {
                this.currentPage -= 1
              } else {
                this.currentPage = 1
              }
            },
            // 下一页
            NextPage: function () {
              if (this.currentPage < this.pageCount) {
                this.currentPage += 1
              } else {
                this.currentPage = this.pageCount
              }
            },
          },
        })
        return
      })
    </script>
  </body>
</html>
